<template>
  <div class="skill_group">
    <div class="header">
      <span class="iconfont icon-zhankai"
            @click="edit(-1)"><span>{{$t('public.add')}}</span></span>
      <el-button class="iconfont icon-shuaxin"
                 :loading="refreshLoading"
                  @click="refresh(false)"><span>{{$t('public.refresh')}}</span></el-button>
      <el-input
        class = "fr"
        :placeholder="$t('public.pleaseEnter')"
        size="mini"
        @keyup.enter.native = "searchName"
        v-model="name">
        <i
          class="el-input__icon el-icon-search"
          slot="suffix"
          @click="searchName">
        </i>
      </el-input>
      <div class="pagina fr">
        <pagination
          small=""
          :currentPage="currentPage"
          :count="count"
          @turnPage="turnPage"
          :totalPage="totalPage"></pagination></div>
    </div>
    <el-table :data="tableData"
              border
              v-loading = "tableLoading"
              size="mini"
              style="width: 100%">
      <el-table-column
        prop="name"
        :label="$t('configLazyLoad.channel.websiteName')"></el-table-column>
      <el-table-column
        prop="updateTime"
        :label="$t('channelsettings.serviceNumber18')"></el-table-column>
    <el-table-column :label="$t('public.operate')">
        <template scope="scope">
          <el-button type="text"
                     size="small"
                     @click="edit(scope.$index, tableData)">{{$t('public.edit')}}</el-button>
          <el-button type="text"
                     size="small"
                     @click="accessCode(scope.row.webchatUrl,tableData[scope.$index].accessId, tableData[scope.$index].name)">{{$t('configLazyLoad.channel.codeDocking')}}</el-button>
          <el-button type="text"
                     size="small">
            <a :href="scope.row.webchatUrl + '/?' + scope.row.accessId"
               target="_blank">{{$t('configLazyLoad.channel.test')}}</a></el-button>
          <el-button type="text"
                     size="small"
                     @click="dele(tableData[scope.$index]._id, tableData[scope.$index].name)">{{$t('public.delete')}}</el-button>
        </template></el-table-column></el-table>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    name: 'ChannelSkillGroup',
    data () {
      return {
        name: '',
        tableData: [],
        refreshLoading: false,
        dialogVisible: false,
        tableLoading: false,
        count: 0,
        totalPage: 1,
        currentPage: 1,
        isSearch: false
      }
    },
    components: {
      Pagination
    },
    methods: {
      // 获取列表第一页最新数据
      refresh (isAdd) {
        this.isSearch = true
        if (this.currentPage === 1) {
          this.isSearch = false
        }
        this.refreshLoading = true
        window.setTimeout(() => {
          this.refreshLoading = false
        }, 400)
        if (isAdd) { // 添加回到第一页
          this.name = ''
          this.currentPage = 1
        }
        this.intiTable()
      },
      // 通过关键字搜索网站名称列表
      searchName () {
        this.currentPage = 1
        this.intiTable(this.name)
      },
      // 翻页触发
      turnPage (index) {
        this.currentPage = index
        if (this.isSearch && index < 2) {
          this.isSearch = false
          return
        }
        this.intiTable()
      },
      edit (index, obj) {
        if (index === -1) {
          this.$emit('edit', '')
        } else {
          let data = {
            _id: obj[index]._id
          }
          this.$store.dispatch('queryWebchatCfgById', data).then(res => {
            if (res && res.success) {
              this.$emit('edit', res.data)
            }
          })
        }
      },
      // 接入代码触发
      accessCode (webchatUrl, accessId, name) {
        this.$emit('accessCode', webchatUrl, accessId, name)
      },
      // test () {
      //   this.$emit('test')
      // },
      dele (id, webname) {
        let text = this.$t('configLazyLoad.channel.sureDelDocking', { webname: webname })
        this.$confirm(text, this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          type: 'warning',
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn'
        })
        .then(() => {
          this.$store.dispatch('deleteWebchatCfg', { _id: id }).then(res => {
            if (res && res.success) {
              this.isSearch = true
              this.intiTable(this.name, 'delete')
              this.$message.success(this.$t('monitor.deleteSuccess'))
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
        // this._id = id
        // this.webName = webname
        // this.dialogVisible = true
      },
      // 通过参数判断是否传name
      intiTable (name, deleteFlag) {
        this.tableLoading = true
        let data = {
          page: this.currentPage,
          platform: 'web',
          limit: 10,
          name: this.name
        }
        if (typeof name === 'string') {
          this.isSearch = true
          data.name = name
        }
        this.$store.dispatch('queryWebchat', data).then(res => {
          if (res && res.success) {
            let _pageList = res.list || []
            if (_pageList.length === 0 && deleteFlag) {
              let page = Math.ceil(res.count / 10)
              if (res.count === 0) {
                // 第一页且count为0是不再发请求
                this.currentPage = 1
              } else {
                this.currentPage = page
                this.intiTable(name, 'delete')
                return false
              }
            }
            let webchatUrl = res.webchatUrl || this.$store.state.platform_urls.webchat_https
            res.list.map(item => {
              item.updateTime = item.updateTime ? item.updateTime : item.createTime
              item.webchatUrl = webchatUrl
            })
            this.tableData = res.list
            this.count = res.count
            this.totalPage = Math.ceil(res.count / 10)
            this.tableLoading = false
          }
        })
      }
    },
    beforeMount () {
      this.intiTable()
    }
  }
</script>
<style lang="stylus" scoped>
    @import "../../../../../../assets/common.styl"
    .new-config
      .skill_group
        height calc(100vh - 52px)
    .skill_group
      height calc(100vh - 174px)
      overflow auto
      .header
        padding 6px 10px
        height 34px
        line-height 34px
        .el-input
          width 170px
        span
          cursor pointer
        .iconfont
          color $c-main
          font-size 12px
          span
            color $cf-gray2
            margin-left 6px
        .el-button
          padding 0
          border none
          margin-left 10px
      .el-table
        .cell
          .el-button:nth-child(4)
            color $c-pink
      .el-dialog
        .dele_text
          text-align center
        .el-dialog__footer
          text-align center

</style>
